<template>
  <div>
    <div class="form_wrraper">
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="rules"
        class="login_form"
      >
        <h3>登录</h3>
        <el-form-item prop="Account">
          <el-input v-model="loginForm.Account" />
        </el-form-item>
        <el-form-item prop="Pwd">
          <el-input
            v-model="loginForm.Pwd"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { userLogin } from '@/assets/api'
import { mapActions } from 'vuex'
export default {
  layout:'other',
  computed:{
    token(){
      console.log(this.$store.state.token);
      return this.$store.state.token;
    }
  },
  data() {
    return {
      loginForm: {},
      rules: {
        Account: [
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          }
        ],
        Pwd: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    ...mapActions (['login']),
    submitForm() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          userLogin(this.loginForm).then((res) => {
            if(res.Ret == 200){
              this.login(res).then(res=>{
                this.$router.push('/home')
              })
            }
          })
          
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.form_wrraper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 350px;
  text-align: center;
  padding: 20px;
  box-shadow: 0px 0px 20px #e3e3e3;
  .login_form {
    width: 100%;
  }
}
</style>
